import { Component, ReactNode } from 'react'
import Style from './index.module.scss'
import initMap from './initMap'
import 'mapbox-gl/dist/mapbox-gl.css'

class Center extends Component {
  /*
   * 地图飞行
   * @param map 地图对象
   * */
  private flyTo = (map: any) => {
    map.flyTo({
      center: [8.11862, 46.58842],
      zoom: 12.5,
      bearing: 130,
      pitch: 75,
      duration: 12000, // 动画时长
      essential: true, //这个动画被认为是必不可少的
    })
  }
  // 组件挂载完成能获取到DOM的生命周期，初始化地图
  async componentDidMount() {
    const map = await initMap()
    setTimeout(() => {
      this.flyTo(map)
    }, 2000)
  }
  // 初始化状态
  render(): ReactNode {
    return (
      <div className={Style.centerBox}>
        <div id="map" className={Style.mapBox} />
      </div>
    )
  }
}

export default Center
